<template>
  <div class="authentication">
    <div class="authentication-wrap">
      <div class="authentication-tab">
        <div
          class="authentication-tab-item"
          :class="{active : active === '认证'}"
          @click="tab('认证')"
        >
          容猫认证
        </div>
        <div
          class="authentication-tab-item"
          :class="{active : active === '入驻'}"
          @click="tab('入驻')"
        >
          入驻流程
        </div>
      </div>
      <div
        v-if="active==='认证'"
        class="authentication-content"
      >
        <div class="authentication-content-title">
          容猫认证
        </div>
        <div class="authentication-content-text">
          如果您是有正规资质的整形医院，或是有合法执业资格的医生，或是在美容、整形、减肥等领域有一技之长的达人，都可以申请容猫认证。
          准备好以下材料，即可联系我们进行认证
        </div>
        <img
          src="~assets/img/authentication-img.png"
          class="authentication-content-img"
        >
      </div>
      <div
        v-if="active==='入驻'"
        class="authentication-content"
      >
        <div class="authentication-content-title">
          入驻流程
        </div>
        <div class="authentication-content-titleText">
          欢迎入驻容猫，请使用下方提供的任意联系方式与我们联系并完成入驻
        </div>
        <div class="authentication-content-condition">
          满足以下五条为必要条件
        </div>
        <div class="authentication-content-condition-item">
          1、至少有1名主治医师以上职称的医师职称证<br>
          2、有效的营业执照<br>
          3、《医疗机构执业许可》《医疗广告审查表》以及对应的《广告成品样件》，且无重大医疗事故<br>
          4、填写《医院入驻申请表》<br>
          5、提供一张医院logo的图片（规格200*200）<br>
        </div>
        <div class="authentication-content-service-wrap">
          <div class="authentication-content-service">
            400客服热线：<p>400-626-2400</p>
          </div>
          <div class="authentication-content-service">
            手机：<p>18612596589</p>
          </div>
          <div class="authentication-content-service">
            QQ：<p>3412908788</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      active: '认证'
    }
  },
  created() {
    this.active = this.$route.query.authenticationTab ? this.$route.query.authenticationTab : '认证'
  },
  methods: {
    tab(text) {
      this.active = text
      this.$router.push({ query: { authenticationTab: text }})
    }
  }
}
</script>
<style scoped  lang='scss'>
.authentication {
  width: 100%;
  height: 100%;
  background: #fff;
  .authentication-wrap {
    width: 1190px;
    height: 780px;
    margin: 0 auto;
    padding-top: 30px;
    display: flex;
  }
}

.authentication-tab-item {
  width: 240px;
  height: 42px;
  background: rgba(246, 246, 246, 1);
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 42px;
  margin-bottom: 10px;
  text-align: center;
}
.authentication-content {
  margin-left: 20px;
}
.authentication-content-title {
  font-size: 30px;
  font-weight: 400;
  color: rgba(80, 76, 255, 1);
}
.authentication-content-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  margin-top: 8px;
}
.authentication-content-img {
  width: 930px;
  height: 558px;
  margin-top: 40px;
}
.authentication-content-titleText {
  font-size: 14px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  margin-top: 8px;
}
.authentication-content-condition {
  font-size: 16px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  margin-top: 40px;
}
.authentication-content-condition-item {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.authentication-content-service-wrap{
  margin-top: 30px;
}
.authentication-content-service {
  font-size: 16px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  margin-top: 10px;
  display: flex;
  > p {
    font-size: 16px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
}
.active {
  color: #504cff;
  background: rgba(237, 237, 255, 1);
}
</style>
